<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px" class="filter-form">
      <el-form-item label="学号" prop="studentNumber">
        <el-input
          v-model="queryParams.studentNumber"
          placeholder="请输入学号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="studentName">
        <el-input
          v-model="queryParams.studentName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-select v-model="queryParams.direction" placeholder="请选择方向" clearable style="width: 150px">
          <el-option
            v-for="item in directionList"
            :key="item.id"
            :label="item.directionName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日志类型" prop="logType">
        <el-select v-model="queryParams.logType" placeholder="请选择日志类型"  clearable style="width: 150px">
          <el-option
            v-for="(label, value) in logTypeMap"
            :key="value"
            :label="label"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="记录时间" prop="createTime">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20" class="mb20">
      <el-col :span="24">
        <el-card class="analysis-card">
          <template #header>
            <div class="card-header">
              <span>数据分析</span>
              <div class="analysis-tabs">
                <el-button 
                  :type="activeTab === 'detail' ? 'primary' : 'default'" 
                  @click="switchTab('detail')"
                >
                  数据明细
                </el-button>
                <el-button 
                  :type="activeTab === 'comprehensive' ? 'primary' : 'default'" 
                  @click="switchTab('comprehensive')"
                >
                  综合能力分析
                </el-button>
                <el-button 
                  :type="activeTab === 'time' ? 'primary' : 'default'" 
                  @click="switchTab('time')"
                >
                  学习时长分析
                </el-button>
                
              </div>
            </div>
          </template>
          <div class="analysis-content">
            <!-- 综合能力分析 -->
            <div v-show="activeTab === 'comprehensive'">
              <ComprehensiveAnalysis ref="comprehensiveRef" :logList="logList" />
            </div>
            
            <!-- 学习时长分析 -->
            <div v-show="activeTab === 'time'">
              <TimeAnalysis ref="timeRef" :logList="logList" />
            </div>
            
            <!-- 数据明细 -->
            <div v-show="activeTab === 'detail'">
              <DataDetail 
                :logList="logList" 
                :total="total" 
                :queryParams="queryParams" 
                :loading="loading"
                @pagination="getList"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="DataAnalysis">
import { ref, onMounted, nextTick } from 'vue'
import { listLog } from '@/api/analyzemanagement/log'
import { listDirection } from '@/api/directionmanagement/direction'
import { useRoute } from 'vue-router'
import ComprehensiveAnalysis from './ComprehensiveAnalysis.vue'
import TimeAnalysis from './TimeAnalysis.vue'
import DataDetail from './DataDetail.vue'

// 获取路由参数
const route = useRoute()
const stuCode = route.query.stuCode || ''
const realname = route.query.realname || ''

// 数据相关
const logList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const dateRange = ref([])
const directionList = ref([]) // 方向列表

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  studentNumber: stuCode || null,
  studentName: realname || null,
  direction: null,
  logType: null
})

// 日志类型映射
const logTypeMap = {
  0: '课程学习',
  1: '学习时长',
  2: '竞赛情况',
  3: '项目实践',
  4: '科创贡献'
}

// 当前激活的标签页
const activeTab = ref('detail')

// 组件引用
const comprehensiveRef = ref(null)
const timeRef = ref(null)

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab
  nextTick(() => {
    // 切换标签页时调整图表大小
    if (tab === 'comprehensive' && comprehensiveRef.value) {
      comprehensiveRef.value.resizeChart()
    } else if (tab === 'time' && timeRef.value) {
      timeRef.value.resizeChart()
    }
  })
}

/** 查询方向列表 */
const getDirectionList = () => {
  listDirection({}).then(response => {
    directionList.value = response.rows || []
  })
}

/** 查询日志列表 */
const getList = () => {
  loading.value = true
  const params = {...queryParams.value}
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginTime = dateRange.value[0]
    params.endTime = dateRange.value[1]
  }
  listLog(params).then(response => {
    logList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  dateRange.value = []
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    studentNumber: stuCode || null,
    studentName: realname || null,
    direction: null,
    logType: null
  }
  handleQuery()
}

// 组件挂载时初始化
onMounted(() => {
  getDirectionList()
  getList()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.filter-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.analysis-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analysis-tabs {
  display: flex;
  gap: 10px;
}

.analysis-content {
  min-height: 600px;
}

.mb20 {
  margin-bottom: 20px;
}
</style>